<!-- annotation Deferred -->
<template>
  <div>
    <button @click="excute">
      Deferred Submit
    </button>
    <div>
      watchCount={{ watchCount }}
    </div>
    <div>
      triggerCount={{ triggerCount }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "kaygnas-vue-property-decorator";
import { Deferred } from "@/annotations/deferred";

@Component({
  name: "Demo9",
})
export default class Demo9 extends Vue {

  public count: number = 0;

  public watchCount: number = 0;

  public triggerCount: number = 0;

  public formData = { current: 1, size:20 };

  @Watch("formData.current")
  public onCurrentChange() {
    this.watchCount += 1;
    this.triggerFunc();
  }

  @Watch("formData.size")
  public onSizeChange() {
    this.watchCount += 1;
    this.triggerFunc();
  }

  @Deferred(33)
  public triggerFunc() {
    this.triggerCount += 1;
  }

  public excute() {
    const { current, size } = this.formData;
    this.formData = { current: current + 1, size: size + 1 };
  }
}
</script>

